<script type="text/javascript">
    activateMenuInvoice();
    activateSubMenuView();

    {% if error_msg %}
    displayError({{ error_msg }})
    {% endif %}
</script>

<div id="invoice">
    <div id="invoice-header">
        <div id="invoice-data">
            <div class="label-value">
                <div class="label"><p>Facture</p></div>
                <div class="value">
                    <select id="invoiceNumberSelect" name="invoice">
                        <option value="">Select ...</option>
                        {% for number in invoice_numbers %}
                            {% if number == selected_invoice %}
                                <option value="{{ number }}" selected="true">{{ number }}</option>
                            {% else %}
                                <option value="{{ number }}">{{ number }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="label-value">
                <div class="label"><p>Date</p></div>
                <div id="date" class="value">{{ invoice.date }}</div>
            </div>
        </div>
        <div id="client">
            <div class="label"><p>Client:</p></div>
            <p class="client-name">{{ invoice.client.name }}</p>
            <div class="client-data">
                <p class="street">{{ invoice.client.address.street }}</p>
                <p class="zipcity">{{ invoice.client.address.zip }}, {{ invoice.client.address.city }}</p>
                <p class="country">{{ invoice.client.address.country }}</p>
                <p class="vat">{{ invoice.client.vat }}</p>
            </div>
        </div>
        <div style="float:left; margin-right:10px;">
            <a href="/invoice/pdf/{{ selected_invoice }}/">
                <img src="/static/img/pdf-download.png" width="43" height="49" alt="PDF"/>
            </a>
        </div>
    </div>
    <div id="lines-block">
        <div id="lines-header">
            <div class="description pointed-line">
                <p>Description</p>
            </div>
            <div class="quantity pointed-line">
                <p>Quantity</p>
            </div>
            <div class="price pointed-line">
                <p>Price</p>
            </div>
            <div class="vat pointed-line">
                <p>VAT</p>
            </div>
            <div class="total pointed-line">
                <p>Total</p>
            </div>
        </div>
        <div id="lines">
            {% for line in invoice.lines %}
                <div class="line">
                    <div class="description">
                        <p>{{ line.description }}</p>
                    </div>
                    <div class="quantity">
                        <p>{{ line.quantity }}</p>
                    </div>
                    <div class="price">
                        <p>{{ line.unit_price }} &euro;</p>
                    </div>
                    <div class="vat">
                        <p>{{ line.vat }} %</p>
                    </div>
                    <div class="total">
                        <p>{{ line.total }} &euro;</p>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="total-line">
            <div class="description pointed-line-top">
                <p>&nbsp;</p>
            </div>
            <div class="quantity pointed-line-top">
                <p>&nbsp;</p>
            </div>
            <div class="price pointed-line-top">
                <p>&nbsp;</p>
            </div>
            <div class="vat pointed-line-top">
                <p>Total:</p>
            </div>
            <div class="total pointed-line-top">
                <p>{{ total }} &euro;</p>
            </div>
        </div>
        <div>&nbsp;</div>
    </div>
    <div class="imgactions">
        <div id="pdf-download">&nbsp;</div>
    </div>
</div>

<script type="text/javascript">
    $("#invoiceNumberSelect").change(function() {
        changeContent("/invoice/view/" + $("select option:selected").val() + "/");
    });
</script>